<template>
  <div>
    <!-- <page-main> -->
    <h2>巡查记录</h2>
    <div>
      <el-scrollbar style="width: 100%; height: 45vh;">
        <el-timeline v-if="dataList.length">
          <el-timeline-item
            v-for="(item, index) in dataList"
            :key="index"
            :timestamp="$getDateTime(item.add_time) + '   ' + item.result"
            placement="top"
          >
            <div>
              <el-descriptions :column="2" border>
                <el-descriptions-item
                  label="ID"
                  label-align="right"
                  align="center"
                  label-class-name="my-label"
                  class-name="my-content"
                  >{{ item.id || '' }}</el-descriptions-item
                >
                <el-descriptions-item
                  label="巡查人"
                  label-align="right"
                  align="center"
                  label-class-name="my-label"
                  class-name="my-content"
                  >{{ item.real_name || '' }}</el-descriptions-item
                >
                <el-descriptions-item
                  label="隐患"
                  label-align="right"
                  align="center"
                  label-class-name="my-label"
                  class-name="my-content"
                  >{{ item.danger_level || '' }}</el-descriptions-item
                >
                <el-descriptions-item
                  label="是否隐患"
                  label-align="right"
                  align="center"
                  label-class-name="my-label"
                  class-name="my-content"
                >
                  <el-button type="warning" v-if="item.danger_id" @click="gotodetails(item.danger_id)"
                    >隐患详情</el-button
                  ><span v-else>否</span>
                </el-descriptions-item>
                <el-descriptions-item
                  label="故障信息"
                  label-align="right"
                  align="center"
                  label-class-name="my-label"
                  class-name="my-content"
                  >{{ item.remark || '' }}</el-descriptions-item
                >
                <el-descriptions-item
                  label="点位名称"
                  label-align="right"
                  align="center"
                  label-class-name="my-label"
                  class-name="my-content"
                  >{{ item.point_name || '' }}</el-descriptions-item
                >
                <el-descriptions-item
                  label="详细位置"
                  label-align="right"
                  align="center"
                  label-class-name="my-label"
                  class-name="my-content"
                  >{{ item.point_address || '' }}</el-descriptions-item
                >
                <!-- <el-descriptions-item label="社会单位名称" label-align="right" align="center" label-class-name="my-label"
                  class-name="my-content" width="150px">{{ item.unit_full_name || "" }}</el-descriptions-item> -->
                <el-descriptions-item
                  label="巡查图片"
                  label-align="right"
                  align="center"
                  label-class-name="my-label"
                  class-name="my-content"
                >
                  <el-image
                    style="width: 150px; height: 150px; margin-right: 20px;"
                    :src="upDataUrl + '' + imgItem"
                    v-for="(imgItem, imgIndex) in item.images"
                    :key="imgIndex"
                    :preview-src-list="[upDataUrl + '' + imgItem]"
                  >
                  </el-image>
                </el-descriptions-item>
                <el-descriptions-item
                  label="巡查视频"
                  label-align="right"
                  align="center"
                  label-class-name="my-label"
                  class-name="my-content"
                >
                  <video
                    style="width: 150px; height: 150px; margin-right: 20px;"
                    :src="upDataUrl + '' + videoItem"
                    v-for="(videoItem, videoIndex) in item.video"
                    :key="videoIndex"
                    autoplay
                  ></video>
                </el-descriptions-item>
              </el-descriptions>
            </div>
            <div style="margin-top: 20px;">
              <el-tree :data="item.question_text" :props="questionProps" default-expand-all />
            </div>
          </el-timeline-item>
        </el-timeline>
        <div v-else>
          <el-empty :image-size="200"></el-empty>
        </div>
      </el-scrollbar>
    </div>
    <div class="block">
      <el-pagination
        @current-change="getLists"
        v-model:currentPage="dataInfo.page"
        :total="dataInfo.total"
        :page-count="dataInfo.total_page"
        background
        layout="total,prev, pager, next, jumper"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  props: ['point_id', 'detailInfoObj'],
  data() {
    return {
      dataList: [],
      dataInfo: '',
      upDataUrl: import.meta.env.DEV ? '/proxy/' : import.meta.env.VITE_APP_API_BASEURL,
      questionProps: {
        children: 'child',
        label: 'name'
      }
    }
  },
  created() {
    this.getLists()
  },
  mounted() {},
  methods: {
    test() {
      let div = document.querySelectorAll('.el-timeline-item__timestamp')
      this.dataList.map((item, index) => {
        console.log(item, index)
        if (item.result == '合格') {
          div[index].style.color = 'green'
        }
        if (item.result == '不合格') {
          div[index].style.color = 'red'
        }
      })
    },
    getLists(page = 1) {
      let data = ''
      if (this.detailInfoObj && Object.keys(this.detailInfoObj).length) {
        data = this.detailInfoObj
      } else {
        data = { point_id: this.point_id }
      }
      this.$api
        .post('/unit/PatrolInfo/record', {
          page,
          rows: 5,
          ...data
        })
        .then((res) => {
          let temp = res.data.lists
          if (temp.length) {
            temp.map((curVal) => {
              curVal?.question_text?.forEach((cur) => {
                cur.child.map((val) => {
                  val.child.map((item) => {
                    let checkedVal = item.value
                    item.child.map((itemVal, index) => {
                      if (itemVal.id != checkedVal) {
                        item.child.splice(index, 1)
                      }
                    })
                  })
                })
              })
            })
          }
          this.dataList = temp
          delete res.data.lists
          this.dataInfo = res.data
          this.$nextTick(() => {
            this.test()
          })
        })
    },
    gotodetails(e) {
      this.$router.push({
        name: 'hiddenDangerRecord',
        query: {
          id: e
        }
      })
      console.log(e)
    }
  }
}
</script>
<style lang="scss" scoped>
.block {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}
</style>
